<template>
  <view>
    <view class="search_top_back">
      <view class="search_top_nav">
        <view :style="{ height: statusBarHeight }" class="status_bar"></view>
        <view class="search_nav_content" :style="{background: bgColor}">
          <view @click="back" style="width: 76rpx;height: 88rpx;">
            <image style="margin-left: 28rpx;height: 36rpx;width: 20rpx;margin-top: 26rpx;" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png">
            </image>
          </view>
          <label class="search_title">故事详情</label>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
export default {
  name: "home-story-nav",
  data() {
    return {
      statusBarHeight: statusBarHeight,
    };
  },
  props: {
    bgColor: {
      type: String,
      default: ""
    }
  },
  methods: {
    back() {
      const path = getCurrentPages();
      if (path.length === 1) {
        uni.switchTab({ url: `/pages/home/home` })
      } else {
        uni.navigateBack()
      }
    },
  }
}
</script>

<style scoped lang="scss">
.status_bar {
  height: 20px;
  width: 100%;
}

.search_nav_content {
  position: fixed;
  width: 100%;
  z-index: 998;
  height: 88rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search_title {
  width: 180rpx;
  left: calc(50% - 90rpx);
  position: absolute;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  color: #000000;
  font-size: 32rpx;
  font-weight: 500;
}

.search_placeholder_view {
  height: 290rpx;
}
</style>
